<template>
  <div>
    <!-- 顶部 导航栏 -->
    <div class="navBarClass">
      <van-nav-bar title="标题" left-text="返回">
        <template #left>
          <van-icon name="wap-home-o" size="70" @click="gotoHome" />
        </template>
        <template #right>
          <van-icon name="search" size="70" />
          <van-icon name="shopping-cart-o" size="70" />
        </template>
      </van-nav-bar>
    </div>

    <!-- 商品信息 -->
    <div class="goods_detail">
      <img :src="goods_img" alt />
      <p>{{goods_name}}</p>
      <b>{{goods_price}}</b>
    </div>
    <!-- sku 商品信息 -->
    <div class="skuClass">
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        goods-id="goodsIdxx"
        @buy-clicked="onBuyClicked"
      >
        <template slot="sku-actions-top">
          <!-- 上传 图片预览 -->
          <div class="uploaderSlot">
            <div class="uploaderSlot_txt">图片上传</div>
            <van-uploader v-model="fileList" :after-read="afterRead"></van-uploader>
          </div>
        </template>
      </van-sku>
    </div>
    <!-- 购买导航 -->
    <div class="GoodsActionClass">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-button type="warning" text="立即购买" @click="onClickButton" />
        <van-goods-action-button type="danger" text="加入购物车" @click="onClickButton" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import "../assets/resetVant.css";
import { Toast } from "vant";
export default {
  data() {
    return {
      uploader_img_arr: [],
      fileList: [], // 上传 图片预览
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            v: [
              {
                id: "11", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl:
                  "https://yanxuan-item.nosdn.127.net/7a09bca04a51a269263061db5fcd0ba4.png", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl:
                  "https://yanxuan-item.nosdn.127.net/7a09bca04a51a269263061db5fcd0ba4.png" // 用于预览显示的规格类目图片
              },
              {
                id: "22",
                name: "蓝色",
                imgUrl:
                  "https://yanxuan-item.nosdn.127.net/3f4b684dad28eafd39b10af4edec40b2.png",
                previewImgUrl:
                  "https://yanxuan-item.nosdn.127.net/3f4b684dad28eafd39b10af4edec40b2.png"
              }
            ],
            k_s: "s1" // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          },
          {
            k: "尺码",
            v: [
              {
                id: "33", // skuValueId：规格值 id
                name: "S" // skuValueName：规格值名称
                // imgUrl: "https://img.yzcdn.cn/1.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                // previewImgUrl: "https://img.yzcdn.cn/1p.jpg" // 用于预览显示的规格类目图片
              },
              {
                id: "44",
                name: "M"
                // imgUrl: "https://img.yzcdn.cn/2.jpg",
                // previewImgUrl: "https://img.yzcdn.cn/2p.jpg"
              }
            ],
            k_s: "s2"
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "11", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "33", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "0", // 最多包含3个规格值，为0表示不存在该规格
            stock_num: 333 // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "11", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "44", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "0", // 最多包含3个规格值，为0表示不存在该规格
            stock_num: 444 // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "22", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "33", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "0", // 最多包含3个规格值，为0表示不存在该规格
            stock_num: 555 // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "22", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "44", // 规格类目 k_s 为 s2 的对应规格值 id
            s3: "0", // 最多包含3个规格值，为0表示不存在该规格
            stock_num: 666 // 当前 sku 组合对应的库存
          }
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "" // 可选值，占位文本
          },
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "日期", // 留言名称
            type: "date", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "" // 可选值，占位文本
          },
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "手机", // 留言名称
            type: "tel", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "" // 可选值，占位文本
          },
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "邮箱", // 留言名称
            type: "email", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "" // 可选值，占位文本
          }
        ],
        hide_stock: false // 是否隐藏剩余库存
      },
      goods: {
        picture: ""
        // 数据结构见下方文档
      },
      messageConfig: {
        // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
        uploadImg: () => {
          return new Promise(resolve => {
            setTimeout(
              () =>
                resolve(
                  "https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg"
                ),
              1000
            );
          });
        },
        // 最大上传体积 (MB)
        uploadMaxSize: 3,
        // placeholder 配置
        placeholderMap: {
          text: "xxx",
          tel: "xxx"
        },
        // 初始留言信息
        // 键：留言 name
        // 值：留言内容
        initialMessages: {
          留言: "留言信息"
        }
      },
      msg: "商品购买页",
      goods_name: "",
      goods_img: "",
      goods_price: 0
    };
  },
  methods: {
    afterRead(_file) {
      // 文件图片上传
      console.log(_file);
      this.uploader_img_arr.push(_file);
    },
    onBuyClicked(_skuData) {
      // sku 组件
      console.log("8888", _skuData);
      console.log(this.uploader_img_arr);
    },
    gotoHome() {
      // 回首页
      this.$router.push("/cateList");
    },
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      // sku组件显示
      Toast("点击按钮");
      this.show = true;
    }
  },
  created() {
    console.log(this.$route.params.goods_info);
    let _n = this.$route.params.goods_info;
    this.goods_name = _n.goods_name;
    this.goods_img = _n.goods_img;
    this.goods_price = _n.goods_price;

    this.goods.picture = _n.goods_img; // sku 商品缩略图
  }
};
</script>

<style lang="scss" scoped>
.goods_detail {
  font-size: 0.4rem;
}
.uploaderSlot {
  display: flex;
  height: 100%;
  align-items: center;
  font-size: 0.36rem;
}
.uploaderSlot_txt {
  margin-left: 0.15rem;
  margin-right: 0.2rem;
}
</style>